<script setup>
import { onMounted, ref } from 'vue'
import { getAllAuthApi, updateAuthNameApi } from '@/apis/authManagement'
import { StringUtils } from '@/utils/StringUtils'
import { ElMessage } from 'element-plus'

const breadList = ref([{name: '系统权限管理', path: '/system/authManagement/memberAuth'}])
const tableData = ref([])
const tableLoading = ref(false)
const updateAuthNameDialogVisible = ref(false)
const updateAuthNameRequest = ref({
  authId: null,
  authName: ''
})

const openUpdateAuthNameDialog = ({id, authName}) => {
  updateAuthNameRequest.value = {
    authId: id,
    authName
  }
  updateAuthNameDialogVisible.value = true
}

const confirmUpdateAuthName = () => {
  const {authName} = updateAuthNameRequest.value
  if (StringUtils.isBlank(authName)) {
    ElMessage.error('权限名称不能为空白！')
    return
  }
  updateAuthNameApi(updateAuthNameRequest.value).then(({code}) => {
    if (code === 200) {
      getAllAuth()
    }
  }).finally(() => {
    updateAuthNameDialogVisible.value = false
  })
}

const getAllAuth = () => {
  tableLoading.value = true
  getAllAuthApi().then(({code, data}) => {
    if (code === 200) {
      tableData.value = data
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

onMounted(() => {
  getAllAuth()
})


</script>

<template>
  <el-breadcrumb separator="/" style="margin-bottom: 20px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <template v-for="(item, index) in breadList">
      <el-breadcrumb-item v-if="item.name" :key="index" :to="item.path">{{ item.name }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>

  <el-table
      v-loading="tableLoading"
      ref="multipleTableRef"
      :data="tableData"
      height="500"
      style="margin-top: 24px;"
      stripe
  >
    <el-table-column property="authName" label="权限名称" width="160" />
    <el-table-column property="authCode" label="权限代码" width="160">
      <template #default="scope">
        <el-tag>{{ scope.row.authCode }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="authUrl" label="权限链接地址" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button
            size="small"
            type="primary"
            @click="openUpdateAuthNameDialog(scope.row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="updateAuthNameDialogVisible" title="权限名称修改" width="500" align-center>
    <el-form-item label="权限名称">
      <el-input v-model="updateAuthNameRequest.authName" autocomplete="off" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateAuthNameDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpdateAuthName">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>